<template>
  <div class="login-wrap">
    <div class="login-left">
      <img class="login-left-bg" src="../assets/img/login-bg.png" alt="">
      <img class="login-left-pic" src="../assets/img/login-pic.png" alt="">
    </div>
    <div class="login-right">
      <div class="ms-login">
        <div class="ms-title">{{$t('loginLang.title')}}</div>
        <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
          <el-form-item class="accountClass" prop="account">
            <el-input autocomplete="new-password" v-model="param.account" :placeholder="$t('loginLang.account_place')">
              <el-popover prpper-class="minWidthPopover"  class="accountTitle" slot="prepend" placement="bottom" trigger="click" ref="popoverRefLang">
                <ul style="margin: 0;height:100%;overflow:auto;cursor: pointer;">
                  <li
                  :style="{
                      backgroundColor:PhoneAreaCode == item.name? '#fff065' : '#fff',
                      padding:'5px 0 5px 10px'
                    }"
                    v-for="item in PhoneAreaCodeList"
                    :key="item.id"
                    @click="handleChangePhoneAreaCode(item)"
                  >
                    <img style="width: 20px;margin-right:10px;" :src="$baseUrl+item.icon" alt="">
                    <span>{{item.code}}</span>
                  </li>
                </ul>
                <span style="cursor: pointer;display: flex; align-items: center;" slot="reference">
                  <img :src="$baseUrl+''+PhoneAreaIcon" alt="">
                  <div style="margin-left:5px;">{{PhoneAreaCode}}</div>
                </span
                >
              </el-popover>
            </el-input>
          </el-form-item>
          <el-form-item prop="password" style="margin-top: 25px">
            <el-input type="password" show-password :placeholder="$t('loginLang.password_place')" v-model="param.password" autocomplete="new-password">
              <i slot="prepend" class="el-icon-lock"></i>
            </el-input>
          </el-form-item>
          <div class="login-btn">
            <el-button type="primary" @click="submitForm()">{{$t('loginLang.login')}}</el-button>
          </div>
        </el-form>
      </div>
      <el-popover class="langChange" placement="bottom" trigger="click" ref="popoverRefLang">
        <ul style="margin: 0;height:100%;overflow:auto;cursor: pointer;">
          <li
          :style="{
              backgroundColor:
              lang == item.name
                  ? '#fff065'
                  : '#fff',
            }"
            v-for="item in langArr"
            :key="item.id"
            @click="handleChangelang(item)"
          >
            {{ item.name }}
          </li>
        </ul>
        <span style="cursor: pointer;" slot="reference">
          <img v-if="lang=='zh'" style="height:20px;" src="@/assets/img/zh.png" alt="">
          <img v-else-if="lang=='ru'" style="height:20px;" src="@/assets/img/ru.png" alt="">
          <img v-else-if="lang=='kz'" style="height:20px;" src="@/assets/img/kz.png" alt="">
          <img v-else-if="lang=='en'" style="height:20px;" src="@/assets/img/en.png" alt="">
        </span>
      </el-popover>
    </div>
  </div>
</template>

<script>
import md5 from 'js-md5';
import { debounce } from '@/utils/func.js'
export default {
  name: 'Login',  // 登录页面
  data(){
    return{
      param: {
        account: '',
        password: ''
      },
      lang:!!JSON.parse(localStorage.getItem('language'))?JSON.parse(localStorage.getItem('language')).lang:'zh',
      langArr:[
        {id:0,name:'简体中文',lang:'zh'},
        {id:1,name:'English',lang:'en'},
        {id:2,name:'Русский язык',lang:'ru'},
        // {id:3,name:'қазақ тілі',lang:'kz'},
      ],
      rules: {},
      PhoneAreaIcon:'',
      PhoneAreaCode:'',
      PhoneAreaCodeList:[],
    }
  },
  watch:{
    lang(){
      this.rules= {
        account: [{ required: true, message: this.$t('loginLang.account_message'), trigger: 'blur' }],
        password: [{ required: true, message: this.$t('loginLang.password_message'), trigger: 'blur' }]
      }
    }
  },
  mounted(){
    this.resetState()
    this.getPhoneAreaCodeList()
    var lett = this;
    document.onkeydown = function (e) {
      var key = window.event.keyCode;
      if (key == 13&&e.target.baseURI.match(/Login/)) {
        lett.submitForm();
      }
    };
  },
  methods: {
    getPhoneAreaCodeList(){
      //获取区号列表
      this.$get("getPhoneAreaCode").then((res) => {
        if(res.success){
          this.PhoneAreaCodeList = res.data;
          if(res.data.length>0){
            this.PhoneAreaIcon=res.data[0].icon
            this.PhoneAreaCode=res.data[0].code
          }
        }
      });
    },
    resetState(){
      let EDITION=localStorage.getItem('EDITION')
      let customerListCopy=localStorage.getItem('customerList')
      localStorage.clear();
      localStorage.setItem('customerList',customerListCopy)
      localStorage.setItem('EDITION',EDITION)
      localStorage.setItem('tabsCard',0)
      localStorage.setItem('tabsArr',JSON.stringify([{
        m_id: 0,
        m_name: this.$t('main.home'),
        route: 'Home',
        noClose: true
      }]))
      this.$store.commit('RESET_STATE')
    },
    //老接口
    submitForm:debounce(function() {
      let EDITION=localStorage.getItem('EDITION')
      if(!!EDITION&&EDITION!='null'){
        this.$get("editon_verification").then((res) => {
          if(!!res.success){
            this.login()
          }else{
            localStorage.setItem('EDITION',null)
          }
        });
      }else{
      this.login()
      }
    },500),
    login(){
      localStorage.setItem('language', JSON.stringify(this.langArr.filter(el=>{return el.lang==this.lang})[0]))
      let params = new FormData();
      params.append("area_code", this.PhoneAreaCode);
      params.append("account", this.param.account);
      params.append("password", this.param.password);
      // params.append("password", md5(this.param.password));
      this.$postForm("login", params)
      .then((res) => {
        if(res.success){
          localStorage.setItem("token", res.access_token);
          sessionStorage.setItem('userData',JSON.stringify(res.data))
          localStorage.setItem('EDITION',res.EDITION)
          this.$router.push('/Home');
          this.$message.success(res.msg);
          document.title=res.data.tips
          let icon=document.querySelector('link[rel ="shortcut icon"]')
          icon.href=this.$baseUrl+res.data.logo
        }
      })
      .catch((res) => {
      });
    },
    //语言切换
    handleChangelang(item){
      this.lang=item.lang
      localStorage.setItem('language', JSON.stringify(item));// 会话存储选择的语言
      this.$i18n.locale = item.lang  
      this.$refs.popoverRefLang.doClose();
    },
    handleChangePhoneAreaCode(item){
      this.PhoneAreaIcon=item.icon
      this.PhoneAreaCode=item.code
    }
  }
}
</script>

<style scoped lang="less">
.login-wrap {
  display: flex;
  // position: absolute;
  // width: 100%;
  // height: 100%;
  // background: url('../assets/img/newlogin-bg.jpg');
}
/deep/ .el-input{
  height: 40px !important;
  .el-input__inner{
    height: 100% !important;
  }
}
/deep/ .el-input-group__prepend{
    padding: 0;
    width: 80px;
    text-align: center;
  }
.accountClass{
  .accountTitle{
    display: flex;
    align-items: center;
    justify-content: center;
    img{
      width: 24px;
      // height: 30px;
      // border-radius: 50%;
    }
  }
}
.ms-title {
  width: 100%;
  text-align: center;
  font-size: 22px;
  margin: 55px 0px 15px;
}
.login-left{
  position: relative;
  width: 50%;
  height: 100vh;
  .login-left-bg{
    width: 100%;
    height: 100%;
  }
  .login-left-pic{
    width: 40%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
  }
}
.login-right {
  width: 50%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.langChange{
  position: absolute;
  top: 30px;
  right: 70px;
}
.ms-login {
  position: relative;
  width: 450px;
  max-width: 90%;
  border-radius: 5px;
  overflow: hidden;
  background:#EBEEF3;
  box-shadow:0px 0px 6px #cccaca;
}
.ms-content {
  padding: 30px 75px;
}
.login-btn {
  margin-top: 10%;
}
.login-btn button {
  width: 100%;
  height: 36px;
  text-align: center;
  margin-bottom: 10px;
  border-radius:8px;
  background:#2569D8;
}
/deep/.el-input__inner{
  height: auto !important;
  border-color: #DCDFE6 !important;
}

</style>
